<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<!--
    v-bind ==> : 用于属性 如value class name 等
    v-on   ==> @ 用于事件，如click
-->
<div id="div_id">
    <ul>
        <li v-for="item in letters" v-bind:key="item">{{item}}</li>
    </ul>
    <button v-on:click="btnClick">按钮</button>
</div>

<script>
    const app=new Vue({
        el:"#div_id",
        data:{
            letters:['a','b','c','d','e']
        },
        methods:{
           btnClick:function () {
               //1.push pop shift unshift splice sort reverse 响应式
               //this.letters.push('f');
               //2.数组下标直接修改，非响应式 (可通过app.letters看到letter数组的值已经发生改变，但是页面上显示的数据未变)
               //this.letters[0]='f';
               //3.VUE的set方法 set(要修改的对象,索引值,修改后的值) 响应式
               Vue.set(this.letters,0,'f');
           }
        }
    })
</script>
</body>
</html>